<script setup lang="ts">
import type { EvaluateRequestParams } from "@/types/Goods";
//接收外部传递进来的参数
const props = defineProps<{ reqParams: EvaluateRequestParams }>();
//定义当前组件要触发的自定义事件
const emit = defineEmits<{ (e: "update:reqParams"): void }>();
//请求参数（双向数据绑定）
const reqParams = useVModel(props, "reqParams", emit);

//更新请求参数
function updateReqParams(Params: Partial<EvaluateRequestParams>) {
  reqParams.value = {
    //获取原有值
    ...reqParams.value,
    // 使用新值覆盖原有值(sortField)
    ...Params,
    // 每次点击排序条件时重置页码
    pages: 1,
  };
}
</script>
<!-- 评价排序组件:  -->
<template>
  <div class="sort">
    <span>排序：</span>
    <a
      href="javascript:"
      @click="updateReqParams({ sortField: '' })"
      :class="{ active: reqParams.sortField === '' }"
      >默认</a
    >
    <a
      href="javascript:"
      @click="updateReqParams({ sortField: 'praiseCount' })"
      :class="{ active: reqParams.sortField === 'praiseCount' }"
      >最新</a
    >
    <a
      href="javascript:"
      @click="updateReqParams({ sortField: 'createTime' })"
      :class="{ active: reqParams.sortField === 'createTime' }"
      >最热</a
    >
  </div>
</template>
<style scoped lang="less">
.sort {
  height: 60px;
  line-height: 60px;
  border-top: 1px solid #f5f5f5;
  border-bottom: 1px solid #f5f5f5;
  margin: 0 20px;
  color: #666;
  > span {
    margin-left: 20px;
  }
  > a {
    margin-left: 30px;
    &.active,
    &:hover {
      color: @xtxColor;
    }
  }
}
</style>
